<template>
    <div class="msg-scroll">
      <div class="title">小宝消息</div>
      <div class="msg-content">
        <p class="msg-item" v-for="msg in msgArr">
          {{msg}}
        </p>
      </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import global from '../../common/global/global';
    export default {
      name: "msgScroll",
      data(){
        return{
          msgArr:[]
        }
      },
      created() {
        this._getMsg()
      },
      methods:{
        _getMsg(){
          var _this = this
          axios.get(global.$host+'/api/open/config/loanMessages',
            {


            },
            {
              headers: {
                // 'Authorization': getStorage('token')
              }
            }
          )
            .then(res => {
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){
                  this.msgArr = res.data.data.message
                  this.$nextTick(()=>{
                    _this._roll()
                  })
                }
              }

            })
            .catch(e => {
              console.log(e)
            })
        },
        _roll(){
          var gonggaobox = document.getElementsByClassName('msg-content')[0];
          var nump=gonggaobox.getElementsByTagName('p');
          var offset=0;
          for(let i=0 ;i<nump.length;i++){
            var scrollheight =nump[i].offsetHeight*nump.length;
          }
          setInterval(function(){
            if(offset == scrollheight){
              offset = 0;
            }
            gonggaobox.style.marginTop = "-"+offset+"px";
            offset += 1;
          },80);
        }
      }
    }
</script>

<style scoped lang="stylus">
  .msg-scroll
    display flex
    height 100%
    overflow hidden
    .title
      flex 0 0 58px
      height 100%
      background #ffffff
      border-right 1px solid #C1C0C0
      font-size 12px
      line-height 16px
    .msg-content
      flex 1
      height 100%
      text-align left
      font-size 12px
      padding-left 12px
      color #B7B7B7
      /*overflow hidden*/

</style>
